<template>
	<view class="container">
		<top-back-navbar position="fixed" :title="(id?'编辑':'新增')+'银行卡'" background="#001b4d" color="#ffff"></top-back-navbar>
		<view class="content">
			<view class="content_box">
				<view class="u-f-ac input_item border-bottom">
					<view class="titles"><text class="mask-icon">*</text>银行卡号</view>
					<view class="inputs">
						<u-input placeholder="请输入银行卡号" v-model="bankid" height="50"
							placeholder-style="color: #bbb;fontSize: 30rpx;">
						</u-input>
					</view>
				</view>
				<view class="u-f-ac input_item border-bottom">
					<view class="titles"><text class="mask-icon">*</text>银行名称</view>
					<view class="picker-cell" @click="pickerShow=true">
						<text class="picker-cell-text" v-if="bankname">{{bankname}}</text>
						<text class="picker-cell-placeholder" v-else>请选择银行名称</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="u-f-ac input_item">
					<view class="titles"><text class="mask-icon">*</text>开户支行</view>
					<view class="inputs">
						<u-input placeholder="请输入开户支行" v-model="bankbranch" height="50"
							placeholder-style="color: #bbb;fontSize: 30rpx;">
						</u-input>
					</view> 
				</view>
				<view class="u-f-ac input_item">
					<view class="titles"><text class="mask-icon">*</text>开户人姓名</view>
					<view class="inputs">
						<u-input placeholder="请输入开户人姓名" v-model="bankuser" height="50"
							placeholder-style="color: #bbb;fontSize: 30rpx;">
						</u-input>
					</view> 
				</view>
				
				<view class="u-f-ac input_item border-bottom">
					<view class="titles">默认银行</view>
					<view class="inputs"  @click.stop="shezhi">
						<radio :value="is_default" :checked="checked" color="#c5000b"/>
					</view>
				</view>
			</view>
			<view style="padding: 80rpx 30rpx;" class="u-f-ajc">
				<button type="primary" style="background-color: #32539b; width:100%;border-radius: 60rpx;"
					@click="submit">{{id?'编辑':'新增'}}银行卡</button>
			</view>

		</view>

		<tabbars :current="3"></tabbars>
		<u-picker mode="selector" v-model="pickerShow" :range="pickerBanklist" @confirm="confirmBank"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankname: '',
				is_default:'0',
				acc_no: '',
				bankuser: '',
				openid: '',
				bankmobile: '',
				bankcardname: '',
				bankid: '',
				idcard: '',
				telephone: '',
				name: '',
				loading: false,
				checked:false,
				pickerShow:false,
				alipayimg: '',
				wechatimg: '',
				bankbranch:'',
				show:[],
				selectBanklist:[],
				pickerBanklist:[],
				id:''
			};
		},
		onLoad: function(e) {
			this.id=e.id || ''
			uni.getStorage({
				key: 'openid',
				success: (res) => {

					this.openid = res.data;
					if(this.id)
					this.setajax()
					this.getBankList()
					// console.log(this.openid)
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods: {
			shezhi(){
				if(this.checked){
					this.is_default='0';
					this.checked=false;
				}else{
					this.is_default='1';
					this.checked=true;
				} 
			},
			confirmBank(e){
				let index=Array.isArray(e) && e.length>0?e[0]:-1;
				if(index>=0){
					this.bankname=this.selectBanklist[index].bankname;
				}
			},
			getBankList() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.withdraw&app=1',
					method: 'POST',
					data: {
						openid: this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						let list = Array.isArray(res.data.banklist)?res.data.banklist:[];
						this.pickerBanklist=list.map(item=>item.bankname)
						this.selectBanklist=list;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			setajax() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.bank_detail&app=1',
					method: 'GET',
					data: {
						openid: this.openid,
						id:this.id
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res)
						const data=res.data.bank_info;
						this.bankid = data.bankid
						this.bankname = data.bankname
						this.bankuser = data.bankuser
						this.bankmobile = data.bankmobile
						this.idcard = data.idcard;
						this.bankbranch = data.bankbranch;
						this.is_default=data.is_default;
						this.checked=data.is_default==1?true:false;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			chooseImage() {
				var _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let file = res.tempFilePaths
						var images = []
						var img = []
						// console.log(file)
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
								//仅为示例，非真实的接口地址
								filePath: file[i],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									console.log(res)
									images.push(JSON.parse(res.data).url)
									_this.imagess = images

									_this.alipayimg = JSON.parse(res.data).url
									console.log(_this.alipayimg)
									img = img + JSON.parse(res.data).url + ';'
									_this.imgurl = img
								}
							});
						}
					}
				});
			},
			submit() {
				let keys=['bankname','bankid','bankuser','bankmobile'],type=true;
				for(let i=0;i<keys.length;i++){
					if(!this.lodash.isString(this[keys[i]]) && !this.lodash.isNumber(this[keys[i]])){
						type=false;
						break;
					}
				}
				if(type == false)return uni.showToast({title:'有必填项目未填写',icon: 'none'});
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.sub_bank&app=1',
					method: 'POST',
					data: {
						bankname: this.bankname,
						bankid: this.bankid,
						bankuser: this.bankuser,
						openid: this.openid,
						bankmobile: this.bankmobile,
						bankbranch: this.bankbranch,
						idcard: this.idcard,
						id:this.id,
						is_default:this.is_default
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res)
						uni.showToast({
							title: res.data.message,
							icon: "none"
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/member/member'
							})
						}, 1500)
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f2f5fa;
	}
	
	.container {
		;
	}

	.navbar {
		width: 100%;
		padding: 140rpx 0 0;

		image {
			width: 80%;
		}
	}

	.content {
		padding:30rpx;
	}

	.content_box {
		padding:30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
		.input_item {
			padding: 22rpx 0 16rpx;
			.titles {
				margin-right: 30rpx;
				display: flex;
				align-items: center;
				width: 160rpx;
				.mask-icon{
					font-size: 26rpx;
					color:#BA1B21;
					padding-right:8rpx;
				}
			}

			/deep/ .u-input__input {
				color: #333 !important;
			}
		}
		.inputs{
			flex:1;
		}
		.border-bottom{
			border-bottom:1px solid #f2f5fa
		}
		.input_item2 {
			margin-top: 10rpx;
			padding: 0;
			height: 150rpx;
			padding-right: 30rpx;

			.images {
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}
	}
	.picker-cell{
		flex:1;
		display: flex;
		height: 50rpx;
		align-items: center;
		justify-content: space-between;
		text{
			font-size: 30rpx;
		}
		.picker-cell-placeholder{
			color: #bbb;
		}
		.picker-cell-text{
			color: #333;
		}
	}
</style>
